<!DOCTYPE html>
<html>
<head>
	<title>专题详情</title>
	<link rel="stylesheet" type="text/css" href="../css/reset.css">
	<link rel="stylesheet" type="text/css" href="../css/public.css">
	<style type="text/css" media="screen">
		#p12{
			background: url("../images/subject/ditu.png");
		}
		.subject-content{
			width: 100%;
			height: 670px;
		}
		.subject-top{
			width: 100%;
			height: 450px;
		}
		.subject-top-left{
			width: 670px;
			height: 450px;
			box-sizing: border-box;
			padding-top: 129px;
			padding-left: 120px;
			float: left;
		}
		.subject-top-left h1{
			font-size: 57px;
			line-height: 60px;
			color: #F98F1E;
		}
		.subject-top-left p{
			font-size: 18px;
			color: #fff;
			line-height: 28px;
			margin-top: 22px;
		}
		.subject-top-right{
			float: right;
			width: 610px;
			height: 450px;
		}
		.subject-top-right:focus img{
			box-sizing: border-box;
			border:3px solid #fff;
		}
		.subject-top-right img{
			margin-top: 66px;
			margin-left: 40px;
			width: 437px;
			height: 314px;
		}
		.subject-top-right p{
			margin-left: 40px;
			margin-top: 20px;
			font-size: 24px;
			line-height: 30px;
			color:#fff;
		}
		.subject-bottom{
			width: 100%;
		    height: 240px;
		    padding: 0 60px;
		    box-sizing: border-box;
		    display: flex;
		    justify-content: space-between;
		    overflow: hidden;
		}
		.subject-list{
			width: 1080px;
			height: 240px;
			overflow: hidden;
		}
		.subject-list ul{
			width: 1080px;
			height: 240px;
		}
		.subject-list ul li{
			width: 270px;
			height: 240px;
			box-sizing: border-box;
			float: left;
			padding: 20px;
		}
		.subject-list ul li:focus img{
			box-sizing: border-box;
			border:3px solid #fff;
		}
		.subject-list ul li img{
			width: 240px;
			height: 160px;
		}
		.subject-list ul li p{
			width: 240px;
			line-height: 40px;
			font-size: 18px;
			color: #fff;
		}
		.subject-back{
			width: 100%;
			height: 50px;
		}
		.subject-back img{
			float: right;
			margin-right: 96px;
			margin-top: 10px;
		}
	</style>
</head>
<body>
<div id="p12" class="box">	
	<div class="subject-content" id="p12Content">
	</div>
	<div class="subject-back">
		<img src="../images/home/return.png" alt="">
	</div>
	
	<div class="bx-dialog" style="display: none" id="detentionDialog">
		<div class="bx-dialog-box">
			<div class="detention-box-top">
				<span>确认退出当前页面？</span>
			</div>
			<div class="detention-box-button">
				<span id="detentionDialogLeft" tabindex="-1">我 点 错 了</span>
				<span id="detentionDialogRight" tabindex="-1">确 认 退 出</span>
			</div>
		</div>
	</div>
</div>
<script src="../js/jquery.min.js"></script>
<script src="../js/public.js"></script>
<script>
	var currentDom;
	var isOnEnd = false;
	function onEnd(dom){
		if(isOnEnd) return;
		isOnEnd = true;
		$("#detentionDialog").show();
		setFocus("detentionDialogLeft");
		currentDom = dom;
	}

	function detentionDialogLeft(event,dom,dir){
		
		switch(event){
			case "MoveFocus":
				switch(dir){
					case "left":
						setFocus("detentionDialogRight");
						break;
					case "right":
						setFocus("detentionDialogRight");
						break;
				}
				break;
			case "Back":
				$("#detentionDialog").hide();
				currentDom.focus();
				isOnEnd = false;
				break;
			case "Click":
				$("#detentionDialog").hide();
				currentDom.focus();
				isOnEnd = false;
				break;
		}
		
	}

	function detentionDialogRight(event,dom,dir){
		switch(event){
			case "MoveFocus":
				switch(dir){
					case "left":
						setFocus("detentionDialogLeft");
						break;
					case "right":
						setFocus("detentionDialogLeft");
						break;
				}
				break;
			case "Back":
				$("#detentionDialog").hide();
				currentDom.focus();
				isOnEnd = false;
				break;
			case "Click":
				
				break;
		}
		
	}

	var subjectData = {
		subjectTitle:"速钓激情专题",
		subjectContent:"《速钓激情》是由北京著名钓鱼俱乐部筹备的一档实景记录钓鱼节目。在节目中，4小时高密度做钓高密度鱼池，模拟黑坑爆连场景，13台高清摄像机几乎全程记录钓鱼的一举一动程记录钓鱼的一举一动程记录钓鱼的一举一动程记录钓鱼的一举一动",
		mainSubject:{
			image:"../images/subject/tu_1.png",
			description:"《速钓激情》第一季第一期"
		},
		subSubject:[
			{
				image:"../images/subject/tu_2.png",
				description:"《速钓激情》第一季第二期"
			},
			{
				image:"../images/subject/tu_3.png",
				description:"《速钓激情》第一季第三期"
			},
			{
				image:"../images/subject/tu_4.png",
				description:"《速钓激情》第一季第四期"
			},
			{
				image:"../images/subject/tu_5.png",
				description:"《速钓激情》第一季第五期"
			},
			{
				image:"../images/subject/tu_5.png",
				description:"《速钓激情》第一季第六期"
			},
			{
				image:"../images/subject/tu_4.png",
				description:"《速钓激情》第一季第七期"
			},
			{
				image:"../images/subject/tu_3.png",
				description:"《速钓激情》第一季第八期"
			},
			{
				image:"../images/subject/tu_2.png",
				description:"《速钓激情》第一季第九期"
			}
		]
	}
	var page,totalPage;

	subjectHtmlInit(subjectData);

	function subjectHtmlInit(subjectData,currentPage){
		//获取当前page
		page = currentPage?currentPage:0;
		//获取总页数
		totalPage = Math.ceil(subjectData.subSubject.length / 4);

		var currentSubSubject = subjectData.subSubject.slice(page * 4, page * 4 + 4);
		
		var leftSrc = page == 0?'../images/home/zuojiantou_1.png':'../images/home/xiangzuo.png';
		var rightSrc = page == totalPage-1?'../images/home/youjiantou_1.png':'../images/home/xiangyou.png';

		var str = "<div class='subject-top'>\
			<div class='subject-top-left'>\
				<h1>"+subjectData.subjectTitle+"</h1>\
				<p>"+subjectData.subjectContent+"</p>\
			</div>\
			<div class='subject-top-right' tabindex='-1' id='mainSubject'>\
				<img src='"+subjectData.mainSubject.image+"'>\
				<p>"+subjectData.mainSubject.description+"</p>\
			</div>\
		</div>\
		<div class='subject-bottom'>\
			<div class='left_arrow'>\
				<img id='leftArrow' src='"+leftSrc+"'>\
			</div>\
			<div class='subject-list'>\
				<ul id='subjectul'>"+createSubjectLi(currentSubSubject)+"</ul>\
			</div>\
			<div class='right_arrow'>\
				<img id='rightArrow' src='"+rightSrc+"'>\
			</div>\
		</div>"


		$("#p12Content").html(str);

		setFocus("mainSubject");
	}

	function createSubjectLi(dataArray){

		var str = "";

		for(var i = 0; i < dataArray.length; i++){

			str += "<li tabindex='-1'><img src='"+dataArray[i].image+"'><p class='style1-con-des'>"+dataArray[i].description+"</p></li>"
		}
		
		return str;
	}


	function mainSubject(event,dom,dir){
		switch(event){
			case "MoveFocus":
				switch(dir){
					
					case "down":
						setFocus("subjectul");
						break;
					case "left":
						setFocus("subjectul");
						break;
					case "right":
						setFocus("subjectul");
						break;
				}
				break;
			case "Back":
				break;
			case "Click":
				break;
		}
	}

	function subjectul(event,dom,dir){
		switch(event){
			case "MoveFocus":
				if(ulIsBorder(dom,dir,4,4)){
					switch(dir){
						case "up":
							setFocus("mainSubject");
							break;
						case "left":
							if(page == 0){
								return
							}else{
								page = page - 1;
								var currentSubSubject = subjectData.subSubject.slice(page * 4, page * 4 + 4);
								var str = createSubjectLi(currentSubSubject);
								$("#subjectul").html(str);

								setFocus("subjectul",3);
							}
							break;
						case "right":
							if(page == totalPage-1){
								return
							}else{
								page = page + 1;
								var currentSubSubject = subjectData.subSubject.slice(page * 4, page * 4 + 4);
								var str = createSubjectLi(currentSubSubject);
								$("#subjectul").html(str);

								setFocus("subjectul",0);
							}
							break;
					}
				}
				var leftSrc = page == 0?'../images/home/zuojiantou_1.png':'../images/home/xiangzuo.png';
				var rightSrc = page == totalPage-1?'../images/home/youjiantou_1.png':'../images/home/xiangyou.png';

				$("#leftArrow")[0].src = leftSrc;
				$("#rightArrow")[0].src = rightSrc;
				break;
			case "Back":
				break;
			case "Click":
				break;
		}
	}
</script>
</body>
</html>